<template>
	<div class="history-container">
		<div class="history-box">
			<div class="history-search" v-if="showSearch">
				<el-form ref="queryRef" :model="queryParams" :inline="true" label-width="68px">
					<el-form-item label="变更日期">
						<el-date-picker
							v-model="queryParams.date"
							value-format="YYYY-MM-DD"
							:clearable="false"
							type="daterange"
							:disabled-date="disabledData"
							range-separator="-"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
						></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="handleQuery"><i class="iconfont icon-sousuo"></i>搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
			<div class="container-scroll" v-loading="loading" element-loading-text="加载中">
				<div v-if="!loading && historyList.length === 0" class="empty-block">暂无数据</div>
				<vxe-list v-else class="el-timeline" :data="historyList" :scroll-y="{ enabled: true }">
					<template #default="{ items }">
						<div class="el-timeline-item" v-for="(history, index) in items" :key="index">
							<div class="el-timeline-item__tail"></div>
							<div
								class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--primary"
								:class="{ 'is-hollow': index == 0 || index == historyList.length - 1 }"
							></div>
							<div class="el-timeline-item__wrapper">
								<div class="el-timeline-item__content">
									<div class="custom-content">
										<div v-if="history.log.includes('title')">
											<span>{{ JSON.parse(history.log).title }}</span>
											<span class="ml16">{{ JSON.parse(history.log).content }}</span>
										</div>
										<div v-else v-html="history.log"></div>
									</div>
									<div class="custom-timestamp" :class="{ 'current-timestamp': index == 0 }">
										<p class="timestamp-first-p">
											{{ history.dateK }}
										</p>
										<p>{{ historyTimes(history.datetime) }}</p>
									</div>
								</div>
							</div>
						</div>
					</template>
				</vxe-list>
			</div>
		</div>
	</div>
</template>
<script setup>
import { selectDeviceLogList } from "@/api/equipment/type";
import { formatDate } from "@/utils/index";
import { parseTime } from "@/utils/utils";

const props = defineProps({
	list: {
		type: Array,
		default: () => []
	},
	type: {
		type: String
	},
	id: {
		type: [Number, String]
	},
	showSearch: {
		type: Boolean,
		default: true
	},
	showDetail: {
		type: Boolean,
		default: false
	}
});
const loading = ref(false);
let showTime = ref("");
const data = reactive({
	queryParams: {
		date: [],
		logType: props.type,
		businessId: props.id || ""
	},
	historyList: []
});
const { queryParams, historyList } = toRefs(data);
const dateJ = formatDate(new Date()).substring(0, 10);
const dataK = formatDate(new Date().getTime() - 3600 * 1000 * 24 * 7).substring(0, 10);
queryParams.value.date = [dataK, dateJ];
const historyTimes = computed(() => val => {
	return parseTime(val, "{y}-{m}-{d} {h}:{i}")?.split(" ")[1];
});
const disabledData = date => {
	return date.getTime() > Date.now() || date.getTime() < Date.now() - 3600 * 1000 * 24 * 30;
};
//查询变更记录
const deviceLogList = async () => {
	loading.value = true;
	const param = new URLSearchParams();
	param.append("startDate", queryParams.value.date[0]);
	param.append("endDate", queryParams.value.date[1]);
	param.append("logType", queryParams.value.logType);
	if (props.id) param.append("businessCode", queryParams.value.businessId);
	const res = await selectDeviceLogList(param);
	res.data.forEach((item, index) => {
		let dateK = item.datetime.substring(0, 10);
		if (showTime.value == dateK && index > 0) {
			item.dateK = "";
		} else {
			showTime.value = dateK;
			item.dateK = dateK;
		}
	});
	res.data.map(item => {
		item.log = item.log.replace(/\n/g, "<br/>");
	});
	historyList.value = res.data;

	loading.value = false;
};
const handleQuery = () => {
	deviceLogList();
};
onMounted(() => {
	if (props.showDetail) {
		props.list.forEach((item, index) => {
			let dateK = item.datetime.substring(0, 10);
			if (showTime.value == dateK && index > 0) {
				item.dateK = "";
			} else {
				showTime.value = dateK;
				item.dateK = dateK;
			}
		});
		historyList.value = props.list;
	} else {
		handleQuery();
	}
});
</script>
<style lang="scss" scoped>
.history-container {
	height: 100%;
	background-color: #fff;
	overflow: hidden;
	.no-data {
		font-size: 14px;
		color: #666;
	}
	.history-box {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		.history-search {
			flex: none;
			padding-bottom: 22px;
			:deep(.el-date-editor) {
				width: 220px;
			}
			.el-button {
				padding: 4px 20px 4px 10px;
				.iconfont {
					font-size: 24px;
					padding-right: 4px;
				}
			}
		}
		.container-scroll {
			flex: 1;
			width: 100%;
			overflow: hidden;
		}
		.empty-block {
			height: calc(100% - 20px);
			display: flex;
			justify-content: center;
			align-items: center;
			color: #666;
		}
		.el-timeline {
			height: calc(100% - 20px);
			overflow: auto;
			::v-deep(.vxe-list--virtual-wrapper) {
				height: 100%;
			}
			.el-timeline-item {
				padding-left: 125px;
				padding-bottom: 58px;
				position: relative;
				&:hover {
					.el-timeline-item__node--primary {
						width: 14px;
						height: 14px;
						left: 124px;
						box-shadow: 0px 0px 10px 1px rgba(148, 172, 251, 0.5);
					}
					.custom-content,
					.custom-timestamp p {
						color: var(--el-color-primary);
					}
				}
				&:first-child {
					padding-top: 8px;
					.el-timeline-item__node--normal {
						&.is-hollow {
							top: 8px;
						}
					}
				}
				&:last-child {
					padding-bottom: 0;
				}
				.el-timeline-item__tail {
					left: 129px;
					border-left: 2px solid var(--el-color-primary);
				}
				.el-timeline-item__node--normal {
					width: 8px;
					height: 8px;
					left: 126px;
					top: 3px;
					&.is-hollow {
						width: 14px;
						height: 14px;
						left: 123px;
						top: 0;
					}
				}
			}
		}
		.custom-content {
			line-height: 20px;
			color: #666;
			word-wrap: break-word;
		}
		.custom-timestamp {
			position: absolute;
			left: -96px;
			top: 0;
			margin: 0;
			width: 80px;
			p {
				margin: 0;
				padding: 0;
				text-align: right;
				color: #666;
				line-height: 20px;
			}
			&.current-timestamp {
				top: -4px;
				left: -122px;
				width: auto;
				p {
					&.timestamp-first-p {
						color: #fff !important;
						width: 108px;
						height: 28px;
						line-height: 28px;
						text-align: center;
						background-color: var(--el-color-primary);
						border-radius: 4px;
						position: relative;
						&::before {
							content: "";
							position: absolute;
							top: 50%;
							margin-top: -6px;
							right: -6px;
							width: 0;
							height: 0;
							border-left: 6px solid var(--el-color-primary);
							border-top: 6px solid transparent;
							border-bottom: 6px solid transparent;
						}
					}
				}
			}
		}
	}
}
</style>
